<!DOCTYPE html>
<html lang="en">



  <head>

<!-- AdThrive Head Tag Manual -->
<script data-no-optimize="1" data-cfasync="false">
(function(w, d) {
	w.adthrive = w.adthrive || {};
	w.adthrive.cmd = w.
	adthrive.cmd || [];
	w.adthrive.plugin = 'adthrive-ads-manual';
	w.adthrive.host = 'ads.adthrive.com';var s = d.createElement('script');
	s.async = true;
	s.referrerpolicy='no-referrer-when-downgrade';
	s.src = 'https://' + w.adthrive.host + '/sites/643436a4e6d20859e40a446b/ads.min.js?referrer=' + w.encodeURIComponent(w.location.href) + '&cb=' + (Math.floor(Math.random() * 100) + 1);
	var n = d.getElementsByTagName('script')[0];
	n.parentNode.insertBefore(s, n);
})(window, document);
</script>
<!-- End of AdThrive Head Tag -->





    <meta charset="utf-8">
    <title>Animation for circular barplot start</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Using d3.js to create a very basic histogram. Example with code (d3.js v4 and v6).">
    <meta name="keywords" content="Data,Dataviz,Datavisualization,Javascript, JS, d3.js">
    <meta name="author" content="Yan Holtz">
  <link rel="icon" href="../img/logo/D3_single_small.png">

    <meta property="og:title" content="Very basic histogram in d3.js">
    <meta property="og:image" content="img/overview_RGG.png">
    <meta property="og:description" content="Using d3.js to create a very basic histogram. Example with code (d3.js v4 and v6).">
    <title>Animation for circular barplot start</title>

    <!-- Bootstrap core CSS -->
    <link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom fonts for this template -->
    <link href="../vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- Custom styles for this template -->
    <link href="../css/agency.css" rel="stylesheet">

    <!-- PRISM -->
    <script src="../LIB/prism.js"></script>
    <link href="../LIB/prism.css" rel="stylesheet" />

    <!-- JQUERY -->
    <script src="../vendor/jquery/jquery.min.js"></script>

    <!-- HTML TO CANVAS -->
    <script src="../js/html2canvas.js"></script>

    <!-- Function to parse html and js code chunks made by Yan Holtz -->
    <script src="../js/myParser.js"></script>

    <!-- Function for radial charts -->
    <script src="../LIB/d3-scale-radial.js"></script>

  </head>




  <body id="page-top">



    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg fixed-top" id="mainNav">
      <div class="container">
        <a class="js-scroll-trigger" href="../index.html">D3.js Graph Gallery</a>
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          Menu
          <i class="fa fa-bars"></i>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav text-uppercase ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="CONTENT/optimization.html">R</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="CONTENT/private_API.html">Python</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="CONTENT/arbitrage.html">Data to viz</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#contact">Who am I</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#contact">About</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>





    <!-- Header -->
    <header class="masthead" style="padding-top: 150px; padding-bottom: 80px">
      <div class="textlanding">
          <p style="display:inline; font-size: 35px">Animation for circular barplot start</p>
          <hr style="width: 100px; height: 1px; border:none;color:#333;background-color:#333;">
          <br>
          <ul class="list-inline social-buttons">
            <li class="list-inline-item">
              <a href="https://twitter.com/R_Graph_Gallery">
                <i class="fa fa-twitter"></i>
              </a>
            </li>
            <li class="list-inline-item social-buttons">
              <a href="https://github.com/holtzy">
                <i class="fa fa-github" style="color: white"></i>
              </a>
            </li>
            <li class="list-inline-item social-buttons">
              <a href="https://www.linkedin.com/in/yan-holtz-2477534a/">
                <i class="fa fa-linkedin"></i>
              </a>
            </li>
          </ul>
          <br><br>
          <p style="max-width: 700px; margin: auto">This is a graph done in d3.js. Visit the histogram section of the d3.js gallery for more examples. This example works with d3.js <code>v4</code> and <code>v6</code></p>
          <br>
          <a class="btn btn-secondary btn-md text-uppercase" href="../histogram.html">Histogram section</a>
          <button class="btn btn-secondary btn-md text-uppercase" onclick="myCodeDownload('chart_example_from_d3-graph-gallery.html', 'code-html-v4', 'code-js-v4')">Download code</button>
      </div>
    </header>















<!-- ==================== GRAPH SECTION = WHERE THE GRAPH APPEARS ==================== -->

<section class="bg-light" style="padding-top: 20px; padding-bottom: 20px">
  <div class="container" >
    <center><div id="result"></div></center>
  </div>
</section>

<!-- ================================================================================= -->




<!-- ==================== CODE SECTION = WHERE THE CODE APPEARS ==================== -->
<section class="code-area" style="padding-top: 20px; padding-bottom: 20px">
<div class="container" >
<div class="col-lg-12 text-center .align-middle">

<div class="v4-v6-toggle">
    <button id="button-show-v4" onclick="showCodeVersion('v4')" type="button" class="btn  btn-secondary btn-sm active">d3 v4</button>
    <span> | </span>
    <button id="button-show-v6" onclick="showCodeVersion('v6')" type="button" class="btn  btn-secondary btn-sm">d3 v6</button>
</div>

<!-- ========= show html code ============== -->
<br><p>This is a very basic <a href="">histogram</a> made using d3.js. The data comes from here. It uses the histogram function d3. And here are a few more things about it. It uses the histogram function d3. And here are a few more things about it. here is the code building the figure. Remember it is interactive.</p>
<aside>&larr; Edit me! </aside>
<pre class="language-html d-none d3v4-chunk"><code id="code-html-v4" contenteditable="true"><xmp><!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

<!-- TODO Load a few functions necessary for radial coordinates: -->
<script src="../LIB/d3-scale-radial.js"></script>

</xmp></code></pre>

<pre class="language-html d-none d3v6-chunk"><code id="code-html-v6" contenteditable="true"><xmp><!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

</xmp></code></pre>

<!-- ==================================== -->



<!-- ========= show JS code v4 ==============  -->
<aside>&larr; Edit me! </aside>
<pre class="language-js d-none d3v4-chunk"><code id="code-js-v4" contenteditable="true"><xmp><script>

// set the dimensions and margins of the graph
var margin = {top: 100, right: 10, bottom: 0, left: 10},
    width = 600 - margin.left - margin.right,
    height = 600 - margin.top - margin.bottom,
    innerRadius = 150,
    outerRadius = Math.min(width, height) / 2;   // the outerRadius goes from the middle of the SVG area to the border

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + (width / 2 + margin.left) + "," + (height / 2 + margin.top) + ")");

// Scales
var x = d3.scaleBand()
    .range([0, 2 * Math.PI])    // X axis goes from 0 to 2pi = all around the circle. If I stop at 1Pi, it will be around a half circle
    .align(0);                  // This does nothing
var y = d3.scaleRadial()
    .range([innerRadius, outerRadius]);   // Domain will be define later.


d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/7_OneCatOneNum.csv", function(data) {

  x.domain(data.map(function(d) { return d.Country; })); // The domain of the X axis is the list of states.
  y.domain([0, 10000]); // Domain of Y is from 0 to the max seen in the data

  // Initialisation: all the bar have a height of 0:
  svg.append("g")
    .selectAll("path")
    .data(data)
    .enter()
    .append("path")
      .attr("fill", "#69b3a2")
      .attr("d", d3.arc()     // imagine your doing a part of a donut plot
          .innerRadius(innerRadius)
          .outerRadius(function(d) { return y(d['Value']); })
          .startAngle(function(d) { return x(d.Country) + x.bandwidth(); })
          .endAngle(function(d) { return x(d.Country) + x.bandwidth(); })
          .padAngle(0.01)
          .padRadius(innerRadius)
          )

  // Then, expand the bars:
  svg.selectAll("path")
    .transition()
    .duration(10000)
      .attr("fill", "#69b3a2")
      .attr("d", d3.arc()     // imagine your doing a part of a donut plot
          .innerRadius(innerRadius)
          .outerRadius(function(d) { return y(d['Value']); })
          .startAngle(function(d) { return x(d.Country); })
          .endAngle(function(d) { return x(d.Country) + x.bandwidth(); })
          .padAngle(0.01)
          .padRadius(innerRadius)
          )



});

</script></xmp></code></pre>
<!-- ==================================== -->

<!-- ========= show JS code v6 ==============  -->
<pre class="language-js d-none d3v6-chunk"><code id="code-js-v6" contenteditable="true"><xmp><script>

// set the dimensions and margins of the graph
const margin = {top: 100, right: 10, bottom: 0, left: 10},
    width = 600 - margin.left - margin.right,
    height = 600 - margin.top - margin.bottom,
    innerRadius = 150,
    outerRadius = Math.min(width, height) / 2;   // the outerRadius goes from the middle of the SVG area to the border

// append the svg object to the body of the page
const svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", `translate(${width/2 + margin.left}, ${height/2 + margin.top})`);

// Scales
const x = d3.scaleBand()
    .range([0, 2 * Math.PI])    // X axis goes from 0 to 2pi = all around the circle. If I stop at 1Pi, it will be around a half circle
    .align(0);                  // This does nothing
const y = d3.scaleRadial()
    .range([innerRadius, outerRadius]);   // Domain will be define later.


d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/7_OneCatOneNum.csv").then( function(data) {

  x.domain(data.map(d => d.Country)); // The domain of the X axis is the list of states.
  y.domain([0, 10000]); // Domain of Y is from 0 to the max seen in the data

  // Initialisation: all the bar have a height of 0:
  svg.append("g")
    .selectAll("path")
    .data(data)
    .join("path")
      .attr("fill", "#69b3a2")
      .attr("d", d3.arc()     // imagine your doing a part of a donut plot
          .innerRadius(innerRadius)
          .outerRadius(d => y(d['Value']))
          .startAngle(d => x(d.Country) + x.bandwidth())
          .endAngle(d => x(d.Country) + x.bandwidth())
          .padAngle(0.01)
          .padRadius(innerRadius)
          )

  // Then, expand the bars:
  svg.selectAll("path")
    .transition()
    .duration(10000)
      .attr("fill", "#69b3a2")
      .attr("d", d3.arc()     // imagine your doing a part of a donut plot
          .innerRadius(innerRadius)
          .outerRadius(d => y(d['Value']))
          .startAngle(d => x(d.Country))
          .endAngle(d => x(d.Country) + x.bandwidth())
          .padAngle(0.01)
          .padRadius(innerRadius)
          )



});

</script></xmp></code></pre>
<!-- ==================================== -->



  </div>
</section>



<!-- ============================ -->






<!-- ============================ RELATED BLOCKS ============================ -->

<section id="contact" class="bg-light" style="padding-top: 70px; padding-bottom: 70px">
  <div class="container">
    <div class="row">
      <div class="col-lg-5 text-center .align-middle" style="border-right: solid; ">
        <div style="display: table; height: 150px; overflow: hidden;">
          <div style="display: table-cell; vertical-align: middle;">
            <h2 class="section-heading text-uppercase" style="color: black">Related blocks</h2>
          </div>
        </div>
      </div>
      <div class="col-lg-5">
        <div style="display: table; height: 150px; overflow: hidden;">
          <div style="display: table-cell; vertical-align: middle;">
            <ul>
            <li><i>D3.selectAll(...).transition() Explained - </i><a href="http://bl.ocks.org/Kcnarf/9e4813ba03ef34beac6e">link</a></li>
            <br>
            <li>yo</li>
            <br>
            <li>ll</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

















<!-- ============================ CONTACT SECTION ============================ -->

    <!-- ANCHOR -->
    <a name="contactanchor"></a>


  <section id="contact" class="bg" style="background-color: white">
     <div class="container">
       <div class="row">
         <div class="col-lg-2 text-center"></div>
         <div class="col-lg-8 text-center">
           <br><br><br>
           <h2 class="section-heading text-uppercase" style="color: black">Contact</h2>
           <p>This document is a work in progress analysis by Yan Holtz. Any feedback is highly encouraged. You can fill an issue on <a href="https://github.com/holtzy/data_to_viz">Github</a>, drop me a message on <a href="https://twitter.com/R_Graph_Gallery">Twitter</a>, or send an email pasting <a href="">yan.holtz.data</a> with <a href="">gmail.com</a>.</p>
           <div style="text-align:center">
              <a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="https://github.com/holtzy">Github</a>
              <a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="https://twitter.com/R_Graph_Gallery">Twitter</a>
            </div>

         </div>
       </div>
    </div>
  </section>








<!-- ============================ FOOTER SECTION ============================ -->    <footer class="bg-light">
      <div class="container" >
        <div class="row">
          <div class="col-md-4">
            <span class="copyright">Copyright &copy; the d3 graph gallery 2018</span>
          </div>
          <div class="col-md-4">
            <ul class="list-inline social-buttons">
              <li class="list-inline-item">
                <a href="https://twitter.com/R_Graph_Gallery">
                  <i class="fa fa-twitter"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a href="https://github.com/holtzy">
                  <i class="fa fa-github"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a href="https://www.linkedin.com/in/yan-holtz-2477534a/">
                  <i class="fa fa-linkedin"></i>
                </a>
              </li>
            </ul>
          </div>
          <div class="col-md-4">
            <ul class="list-inline quicklinks">
              <li class="list-inline-item">
                <a href="#">Privacy Policy</a>
              </li>
              <li class="list-inline-item">
                <a href="#">Terms of Use</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </footer>

<!-- ============================ -->




















<!-- ============================ JAVASCRIPT SECTION ============================ -->



    <!-- Bootstrap core JavaScript -->
    <script src="../vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!-- Plugin JavaScript -->
      <!--<script src="../vendor/jquery-easing/jquery.easing.min.js"></script> -->

    <!-- Contact form JavaScript -->
    <script src="../js/jqBootstrapValidation.js"></script>

    <!-- Custom scripts for this template -->
    <script src="../js/agency.min.js"></script>

    <!-- Activate the bootstrap tooltip, must be after jQuery load -->
    <script>
      $(function () {
          $('[data-toggle="tooltip"]').tooltip()
      })
    </script>

    <script>
      showCodeVersion('v4')
    </script>









  </body>

</html>
